import React, { useState } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Dropdown, Layout, Menu, theme } from 'antd';
import { getMenusApi } from '../apis/menus'
import '../assets/styles/navPage.less'
import { useSelector, useDispatch } from 'react-redux'

const { Header, Sider, Content } = Layout;

export default function NavPage() {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const [items, setItems] = useState([])
    const location = useLocation()
    const navigate = useNavigate()
    // console.log(1);
    const { username } = JSON.parse(localStorage.user)
    const avatar = useSelector(state=>{
        return state.avatar.avatar
    })

    React.useEffect(() => {
        const user = JSON.parse(localStorage.user)
        getMenusApi(user.username).then(res => {
            // console.log(res);
            const menus = handleMenus(res[0].children)
            // console.log(menus);
            setItems(menus)
            // console.log(menus);
        })
    }, [])
    function handleMenus(menus) {
        return menus.map(item => {
            const o = {
                title: item.name,
                label: item.name,
                key: item.path,
            }
            if (item.children) {
                o.children = handleMenus(item.children);
            }
            if (item.icon) {
                o.icon = <i className={'iconfont iconfont-' + item.icon} />;
            }
            return o;
        })
    }
    function clickMenu(params) {
        // console.log(params);
        const [path, titleKey] = params.keyPath
        navigate(path)
        if (titleKey) {
            sessionStorage.titleKey = titleKey
        } else {
            sessionStorage.removeItem('titleKey')
        }
    }
    function logout(){
        localStorage.clear()
        navigate('/login')
    }
    return (

        <Layout style={{ minHeight: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed} width={250}>
                <div className='aside-title'>
                    <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
                    {
                        collapsed ? <></> : <h1>赤兔养车</h1>
                    }
                </div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={location.pathname}
                    items={items}
                    onClick={clickMenu}
                    defaultOpenKeys={[sessionStorage.titleKey]}
                />
            </Sider>
            <Layout className="site-layout">
                <Header
                    style={{
                        padding: '0 20px',
                        background: colorBgContainer,
                    }}
                    className='header'
                >
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })}
                    <Dropdown
                        placement="bottomRight"
                        dropdownRender={()=>(
                            <ul className='drop-container'>
                                <li onClick={()=>navigate('/userCenter')}>个人中心</li>
                                <li>密码修改</li>
                                <li>系统设置</li>
                                <li onClick={logout}>退出登录</li>
                            </ul>
                        )}
                    >
                        <div className='header-right'>
                            <img src={"http://xawn.f3322.net:8002/distremote/static/avatar/" + avatar} alt="" />
                            <div>{username}</div>
                        </div>
                    </Dropdown>

                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                    }}
                >
                    <Outlet></Outlet>
                </Content>
            </Layout>
        </Layout>

    )
}
